import React from 'react';
import { Chart, Tooltip, Interval, Geom, Axis, Coord } from 'bizcharts';
import { Card, Col, Row } from "antd";
// import { RobotOutlined, DingdingOutlined } from '@ant-design/icons';


class AlarmStatistics extends React.Component {
    constructor(props){
        super(props);
        this.state = {};
    }
    render() {
        // 数据源
        const alert_data_account = this.props.alert_data_account;
        const alert_data_cycle = this.props.alert_data_cycle;
        const cols = {
			account_name:{
				alias:'账号' // 别名
			},
			total_number:{
				alias:'告警次数' // 别名
			}
		};
        console.log('sssssssss',this.props)

        return (
            <div>
				<Card>
                    <span style={{ fontSize: '15px'}}>各平台报警历史趋势</span>
                    <Chart height={300} padding="auto" data={alert_data_cycle} autoFit>
                    <Interval
                        adjust={[
                        {
                            type: 'dodge',
                            marginRatio: 0,
                        },
                        ]}
                        color="platform"
                        position="date*total_number"
                        label="total_number"
                    />
                    <Tooltip shared />
                    </Chart>
				</Card>
				<Row gutter={16}>
				<Col span={12}>
				<Card>
                    <span style={{ fontSize: '15px'}}>账号报警数Top10</span>
                    <Chart
                        height={300}
                        data={alert_data_account}
                        scale={cols}
                        padding="auto"
                        autoFit
                    >
                        <Coord transpose />
                        <Axis name="account_name" title/>
                        <Axis name="total_number" title/>
                        <Tooltip />
                        <Geom
                            type="interval"
                            position="account_name*total_number"
                            color={['total_number', '#E6F6C8-#3376CB']}
                            label="total_number"
                        >
                        </Geom>
                    </Chart>
				</Card>
				</Col>

				<Col span={12}>
					<Card>
                        <span style={{ fontSize: '15px'}}>事业部报警数Top10</span>
                        <Chart
                            height={300}
                            data={alert_data_account}
                            scale={cols}
                            padding="auto"
                            autoFit
                        >
                            <Coord transpose />
                            <Axis name="account_name" title/>
                            <Axis name="total_number" title/>
                            <Tooltip />
                            <Geom
                                type="interval"
                                position="account_name*total_number"
                                color={['total_number', '#E6F6C8-#3376CB']}
                                // label={['name*count', (name, value) => numeral(value || 0).format('0.0%')]}
                                label="total_number"
                            >
                            </Geom>
                        </Chart>
					</Card>
					</Col>
				</Row>
            </div>
            
        )
    }
}

export default AlarmStatistics
